<!DOCTYPE html>
<html lang="en-us">
  <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noodp"/>
  <meta name="author" content="Akunor">
  
  
  
  
  <link rel="next" href="https://akunorokia.github.io/2019/2019-03-15-mentality-you-should-be/" />
  <link rel="canonical" href="https://akunorokia.github.io/2019/2019-03-14-first-manual/" />
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/site.webmanifest">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
  <title>
       
       
           如何在github.io搭建Hugo博客站 | Akunorokia
       
  </title>
  <meta name="title" content="如何在github.io搭建Hugo博客站 | Akunorokia">
    
  
  <link rel="stylesheet" href="/font/iconfont.css">
  <link rel="stylesheet" href="/css/main.min.css">


  
  
 

<script type="application/ld+json">
 "@context" : "http://schema.org",
    "@type" : "BlogPosting",
    "mainEntityOfPage": {
         "@type": "WebPage",
         "@id": "https://akunorokia.github.io/"
    },
    "articleSection" : "posts",
    "name" : "如何在github.io搭建Hugo博客站",
    "headline" : "如何在github.io搭建Hugo博客站",
    "description" : "摘要 在前面的博文中介绍了如何在github.io上搭建自己的博客站，基于的是Jekyll，这也是github中比较常用的方式，好处是github可以自动调用Jekyll来帮你及时生成、更新你的博客站。本来一切还是挺美好的，随着使用的深入，博主发现有几点实在是不能忍：
 github上面的Jekyll版本实在太低了，对于code block渲染问题严重。最受不了的一点就是很多种类型的code在里面被显示成一行 Jekyll对文章的文件名有着严格的定义，且不能够放到不同的目录，这个在博文比较多的时候极为不便  博主平时喜欢关注各种新技术，较早的时候就曾关注过一个的博客建站的工具Hugo，用Go语言（博主的最爱之一）写的，当时就觉得挺不错。经过这几年的发展已经非常成熟，Github上面的Stars截止本文已经24250了。在经过一段时间的Jekyll的折磨之后，终于乘着最近稍微闲了一点，将Jekyll彻底换成了Hugo。本文就简单介绍一下，如何在github.io上部署你的Hugo博客站。
准备工作 跟基于Jekyll一样，如果需要在github.io上部署的话，必须在github上创建你自己的&lt;username&gt;.github.io的repo，详细过程请参见前面的博文。
搭建Hugo博客站 安装Hugo Hugo的安装非常简单，在MAC上执行：
brew install hugo  其它安装方式，可以参见官网教程。
创建你的博客站  在github上面创建博客文章的repo
Hugo的建站部署方式跟Jekyll不同，github会自动的识别Jekyll并调用Jekyll工具帮你自动生成、更新博客站，所以我们只需要直接在自己的&lt;username&gt;.github.io中编写文章并上传即可。但是github并不能直接识别Hugo的内容，因此，这个博客站的生成、更新的工作得由你自己完成，&lt;username&gt;.github.io只是用来托管你生成后的静态网站的内容（github支持托管静态网站，请参见这里)，因此，你还需要另一个git repo来真正的编辑、保存、管理你的博文。为此，博主创建了一个名为blogs的repo，以下说到博文管理repo指的就是这个repo。
 用Hugo建站
 初始化博客站
hugo new site blogs  git init
cd blogs git init  指定github源
git remote add origin git@github.com:keysaim/blogs.git   这样，你本地的初始化的Hugo博客站已经准备好了。
 添加一个主题
Hugo官方有非常多的免费开源的主题，猛击这里。博主选用的是国人开发的一款主题Jane。
git submodule add -b master https://github.com/xianmin/hugo-theme-jane.git themes/jane cp -r themes/jane/exampleSite/content ./ cp themes/jane/exampleSite/config.toml ./  本地测试
在部署之前，先本地测试一下：
hugo server  然后本地浏览器打开http://localhost:1313，没有意外的话你将看到类似这样的：",
    "inLanguage" : "en-us",
    "author" : "Akunor",
    "creator" : "Akunor",
    "publisher": "Akunor",
    "accountablePerson" : "Akunor",
    "copyrightHolder" : "Akunor",
    "copyrightYear" : "2019",
    "datePublished": "2019-03-14 00:00:00 &#43;0000 UTC",
    "dateModified" : "2019-03-14 00:00:00 &#43;0000 UTC",
    "url" : "https://akunorokia.github.io/2019/2019-03-14-first-manual/",
    "wordCount" : "377",
    "keywords" : [ "教程","github", "Akunorokia"]
}
</script>

</head>

  


  <body class="">
    <div class="wrapper">
        <nav class="navbar">
    <div class="container">
        <div class="navbar-header header-logo">
        	<a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-xihuan"></i></a>&nbsp;<a href="https://akunorokia.github.io/">Akunorokia</a>
        </div>
        <div class="menu navbar-right">
                
                
                <a class="menu-item" href="/posts/" title="">Blog</a>
                
                <a class="menu-item" href="/categories/" title="">Categories</a>
                
                <a class="menu-item" href="/tags/" title="">Tags</a>
                
                <a class="menu-item" href="/about/" title="">About</a>
                
        </div>
    </div>
</nav>
<nav class="navbar-mobile" id="nav-mobile" style="display: none">
     <div class="container">
        <div class="navbar-header">
            <div>  <a href="javascript:void(0);" class="theme-switch"><i class="iconfont icon-xihuan"></i></a>&nbsp;<a href="https://akunorokia.github.io/">Akunorokia</a></div>
            <div class="menu-toggle">
                <span></span><span></span><span></span>
            </div>
        </div>
     
          <div class="menu" id="mobile-menu">
                
                
                <a class="menu-item" href="/posts/" title="">Blog</a>
                
                <a class="menu-item" href="/categories/" title="">Categories</a>
                
                <a class="menu-item" href="/tags/" title="">Tags</a>
                
                <a class="menu-item" href="/about/" title="">About</a>
                
        </div>
    </div>
</nav>
    	 <main class="main">
          <div class="container">
      		
<article class="post-warp" itemscope itemtype="http://schema.org/Article">
    <header class="post-header">
        <h1 class="post-title" itemprop="name headline">如何在github.io搭建Hugo博客站</h1>
        <div class="post-meta">
                Written by <a itemprop="name" href="https://akunorokia.github.io/" rel="author">Akunor</a> with ♥ 
                <span class="post-time">
                on <time datetime=2019-03-14 itemprop="datePublished">March 14, 2019</time>
                </span>
                in
                <i class="iconfont icon-folder"></i>
                <span class="post-category">
                        <a href="https://akunorokia.github.io/categories/github/"> github </a>
                        
                </span>
        </div>
    </header>
    <div class="post-content">
        

        
            
        

        
        
     
          
          
          

          
          
          

          

<h1 id="摘要">摘要</h1>

<p>在<a href="Jekyll blog" rel="nofollow noreferrer" target="_blank">前面的博文</a>中介绍了如何在<code>github.io</code>上搭建自己的博客站，基于的是<a href="https://jekyllrb.com/" rel="nofollow noreferrer" target="_blank">Jekyll</a>，这也是github中比较常用的方式，好处是github可以自动调用<code>Jekyll</code>来帮你及时生成、更新你的博客站。本来一切还是挺美好的，随着使用的深入，博主发现有几点实在是不能忍：</p>

<ul>
<li>github上面的<code>Jekyll</code>版本实在太低了，对于code block渲染问题严重。最受不了的一点就是很多种类型的code在里面被显示成一行</li>
<li><code>Jekyll</code>对文章的文件名有着严格的定义，且不能够放到不同的目录，这个在博文比较多的时候极为不便</li>
</ul>

<p>博主平时喜欢关注各种新技术，较早的时候就曾关注过一个的博客建站的工具<code>Hugo</code>，用Go语言（博主的最爱之一）写的，当时就觉得挺不错。经过这几年的发展已经非常成熟，Github上面的Stars截止本文已经24250了。在经过一段时间的<code>Jekyll</code>的折磨之后，终于乘着最近稍微闲了一点，将<code>Jekyll</code>彻底换成了<code>Hugo</code>。本文就简单介绍一下，如何在github.io上部署你的<code>Hugo</code>博客站。</p>

<h1 id="准备工作">准备工作</h1>

<p>跟基于<code>Jekyll</code>一样，如果需要在github.io上部署的话，必须在github上创建你自己的<code>&lt;username&gt;.github.io</code>的repo，详细过程请参见<a href="Jekyll blog" rel="nofollow noreferrer" target="_blank">前面的博文</a>。</p>

<h1 id="搭建-hugo-博客站">搭建<code>Hugo</code>博客站</h1>

<h2 id="安装-hugo">安装<code>Hugo</code></h2>

<p><code>Hugo</code>的安装非常简单，在MAC上执行：</p>

<pre><code>brew install hugo
</code></pre>

<p>其它安装方式，可以参见<a href="https://gohugo.io/getting-started/installing/" rel="nofollow noreferrer" target="_blank">官网教程</a>。</p>

<h2 id="创建你的博客站">创建你的博客站</h2>

<ol>
<li><p>在github上面创建博客文章的repo</p>

<p><code>Hugo</code>的建站部署方式跟<code>Jekyll</code>不同，github会自动的识别<code>Jekyll</code>并调用<code>Jekyll</code>工具帮你自动生成、更新博客站，所以我们只需要直接在自己的<code>&lt;username&gt;.github.io</code>中编写文章并上传即可。但是github并不能直接识别<code>Hugo</code>的内容，因此，这个博客站的生成、更新的工作得由你自己完成，<code>&lt;username&gt;.github.io</code>只是用来托管你生成后的静态网站的内容（github支持托管静态网站，请参见<a href="https://help.github.com/articles/user-organization-and-project-pages/#user--organization-pages" rel="nofollow noreferrer" target="_blank">这里</a>)，因此，你还需要另一个git repo来真正的编辑、保存、管理你的博文。为此，博主创建了一个名为<a href="https://github.com/keysaim/blogs" rel="nofollow noreferrer" target="_blank">blogs</a>的repo，以下说到博文管理repo指的就是这个repo。</p></li>

<li><p>用<code>Hugo</code>建站</p>

<ul>
<li><p>初始化博客站</p>

<pre><code class="language-sh">hugo new site blogs
</code></pre></li>

<li><p>git init</p>

<pre><code class="language-sh">cd blogs
git init
</code></pre></li>

<li><p>指定github源</p>

<pre><code class="language-sh">git remote add origin git@github.com:keysaim/blogs.git
</code></pre></li>
</ul>

<p>这样，你本地的初始化的<code>Hugo</code>博客站已经准备好了。</p></li>

<li><p>添加一个主题</p>

<p><code>Hugo</code>官方有非常多的免费开源的主题，<a href="https://themes.gohugo.io/" rel="nofollow noreferrer" target="_blank">猛击这里</a>。博主选用的是国人开发的一款主题<a href="https://themes.gohugo.io/hugo-theme-jane/" rel="nofollow noreferrer" target="_blank">Jane</a>。</p>

<pre><code>git submodule add -b master https://github.com/xianmin/hugo-theme-jane.git themes/jane
cp -r themes/jane/exampleSite/content ./
cp themes/jane/exampleSite/config.toml ./
</code></pre></li>

<li><p>本地测试</p>

<p>在部署之前，先本地测试一下：</p>

<pre><code class="language-sh">hugo server
</code></pre>

<p>然后本地浏览器打开<a href="http://localhost:1313" rel="nofollow noreferrer" target="_blank">http://localhost:1313</a>，没有意外的话你将看到类似这样的：</p>

<div style="text-align:center">
    <img src="https://d33wubrfki0l68.cloudfront.net/9a581e943c0732d9c9852138ff0ad94f10b710a8/b6bf8/hugo-theme-jane/hugo-theme-jane/screenshot-hugo-theme-jane_huda38615ea8fd917fd31d36ba7a275d34_226834_1500x1000_fill_catmullrom_top_2.png" alt="" width="100%"/>
</div>

<p>这是<code>Jane</code>主题默认提供的样式跟内容，说明你的本地<code>Hugo</code>站可以正常工作了。</p></li>
</ol>

<h2 id="修改默认的配置">修改默认的配置</h2>

<p><code>Hugo</code>的默认配置文件是<code>config.toml</code>，这里还是<code>Jane</code>提供的默认配置，需要修改为你自己的信息，比如名字等，很多配置显而易见，这里不详述，只是着重指出几个有点困难或者比较重要的配置：</p>

<ol>
<li><p>修改<code>baseURL</code></p>

<p><code>baseURL</code>是你博客最终部署的网站的url，基于github.io的话就应该是这样的<a href="https://keysaim.github.io/" rel="nofollow noreferrer" target="_blank">https://keysaim.github.io/</a>。</p></li>

<li><p>启用gitment</p>

<p>关于gitment的详细教程，请参见<a href="https://keysaim.github.io/post/2017-08-16-how-to-add-comments/" rel="nofollow noreferrer" target="_blank">这篇博文</a>，按照教程准备好github的几个token之后，只需要修改<code>Hugo</code>配置中的这几行：</p>

<pre><code class="language-toml">[params.gitment]          # Gitment is a comment system based on GitHub issues. see https://github.com/imsun/gitment
    owner = &quot;keysaim&quot;              # Your GitHub ID
    repo = &quot;comments&quot;               # The repo to store comments
    clientId = &quot;xxxx&quot;           # Your client ID
    clientSecret = &quot;xxxx&quot;       # Your client secret
</code></pre>

<p>其中，repo就是教程中所说的github上面为保存comments而创建的repo，clientId跟clientSecret就是你自己创建的oauth授权信息。</p></li>

<li><p>修改页面博文数量显示</p>

<p>有几个参数会影响页面博文数的显示：</p>

<pre><code class="language-toml">paginate = 15               # 首页每页显示的文章数
archive-paginate = 50       # 归档、标签、分类每页显示的文章数目
</code></pre></li>

<li><p>修改语言</p>

<p>如果你需要将博客站显示成中文，那么请这么修改：</p>

<pre><code class="language-toml">defaultContentLanguage = &quot;zh-cn&quot;
[Languages.zh-cn]
  languageCode = &quot;zh-cn&quot;
</code></pre></li>
</ol>

<h2 id="编辑博文">编辑博文</h2>

<p>默认情况下，<code>Jane</code>主题将博文放在<code>content/post/</code>下面，你需要在这下面编辑你的博文。<code>Hugo</code>是支持分目录的，这点非常好，比如博主可以这么分：</p>

<pre><code class="language-console">$ ll
total 4
drwxr-xr-x 3 nbaoping staff  102 Mar 21 16:22 arch
drwxr-xr-x 6 nbaoping staff  204 Mar 22 10:50 blog
drwxr-xr-x 5 nbaoping staff  170 Mar 22 10:33 docker
drwxr-xr-x 4 nbaoping staff  136 Mar 21 16:21 git
drwxr-xr-x 9 nbaoping staff  306 Mar 21 16:20 linux
drwxr-xr-x 3 nbaoping staff  102 Mar 21 16:22 note
drwxr-xr-x 3 nbaoping staff  102 Mar 21 16:24 others
</code></pre>

<p>还有一点非常不错的就是<code>Hugo</code>可以识别出<code>Jekyll</code>的博文，包括里面的标题，时间跟标签等信息。这样博主非常方便的将之前的<code>Jekyll</code>的所有博文直接迁移过来了，而无需做什么修改。当然，如果你新写博文的话，在博文的头部可以这样编写：</p>

<pre><code class="language-yaml">---
date: 2018-03-22
title: &quot;如何在github.io搭建Hugo博客&quot;
tags:
    - 教程
    - github
categories:
    - github
comment: true
---
</code></pre>

<p>编写完成之后，本地查看一下你的博文，没有问题的话先提交到你的博文管理的repo：</p>

<pre><code class="language-sh">git add xxxx
git commit -m &quot;YOUR COMMIT MESSAGE&quot;
git push origin master
</code></pre>

<h2 id="部署博客站">部署博客站</h2>

<p>这一步很关键了，咱们需要将自己的<code>Hugo</code>博文站部署到github.io。</p>

<ol>
<li><p>添加你的github.io</p>

<pre><code class="language-sh">git submodule add -b master git@github.com:keysaim/keysaim.github.io.git public
</code></pre>

<p>这里将其作为submodule添加进来，且放到<code>public</code>目录下面，<code>public</code>目录是<code>Hugo</code>生成静态文件的地方，这样的话咱们就可以把生成出来的静态文件直接上传到你的<code>&lt;username&gt;.github.io</code>的repo里面了</p></li>

<li><p>生成静态博客站</p>

<pre><code class="language-sh">hugo
</code></pre>

<p>直接运行<code>hugo</code>命令，就会在<code>public</code>目录下生成静态博客站。</p></li>

<li><p>提交</p>

<pre><code class="language-sh">cd public
git add .
git commit -m &quot;YOUR COMMIT MESSAGE&quot;
git push origin master
</code></pre></li>

<li><p>查看你的github.io博客站</p>

<p>正常情况下，过一会你就可以看到你基于<code>Hugo</code>的github.io博客站了，博主的是<a href="https://keysaim.github.io/" rel="nofollow noreferrer" target="_blank">https://keysaim.github.io/</a>。</p></li>
</ol>

<h2 id="自动部署脚本">自动部署脚本</h2>

<p>为了方便，<code>Hugo</code>提供了一个<a href="https://gohugo.io/hosting-and-deployment/hosting-on-github/#put-it-into-a-script" rel="nofollow noreferrer" target="_blank">自动部署的脚本</a>，这里博主稍微修改了一点点用来同时提交这两个repo：</p>

<pre><code class="language-sh">#!/bin/bash

if [ $# -lt  1 ]; then
    echo &quot;$0 &lt;commit message&gt;&quot;
    exit 1
fi

msg=&quot;$1&quot;
git commit -m &quot;$msg&quot;
if [ $? -ne 0 ]; then
    echo &quot;Commit failed&quot;
    exit 1
fi
git push origin master
if [ $? -ne 0 ]; then
    echo &quot;Push failed&quot;
fi

echo -e &quot;\033[0;32mDeploying updates to GitHub...\033[0m&quot;

# Build the project.
hugo # if using a theme, replace with `hugo -t &lt;YOURTHEME&gt;`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
git commit -m &quot;$msg&quot;

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..
</code></pre>

<p>至此，恭喜你已经完成了你的<code>Hugo</code>博客站了。</p>

    </div>

    <div class="post-copyright">
             
            <p class="copyright-item">
                <span>Author:</span>
                <span>Akunor </span>
                </p>
            
           
             
            <p class="copyright-item">
                    <span>Link:</span>
                    <a href=https://akunorokia.github.io/2019/2019-03-14-first-manual/>https://akunorokia.github.io/2019/2019-03-14-first-manual/</span>
            </p>
            
             
            <p class="copyright-item lincese">
                本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可
            </p>
            
    </div>

  
    <div class="post-tags">
        
            <section>
            <i class="iconfont icon-tag"></i>Tag(s): 
            
            <span class="tag"><a href="https://akunorokia.github.io/tags/%E6%95%99%E7%A8%8B/">
                    #教程</a></span>
            
            <span class="tag"><a href="https://akunorokia.github.io/tags/github/">
                    #github</a></span>
            
            </section>
        
        <section>
                <a href="javascript:window.history.back();">back</a></span> · 
                <span><a href="https://akunorokia.github.io/">home</a></span>
        </section>
    </div>

    <div class="post-nav">
         
        
        <a href="https://akunorokia.github.io/2019/2019-03-15-mentality-you-should-be/" class="next" rel="next" title="【转载】人人当老板，谁来做长工">【转载】人人当老板，谁来做长工&nbsp;<i class="iconfont icon-right"></i></a>
        
    </div>

    <div class="post-comment">
          
                 
          
    </div>
</article>
          </div>
		   </main>
      <footer class="footer">
    <div class="copyright">
        &copy;
        
        <span itemprop="copyrightYear">2017 - 2019</span>
        
        <span class="with-love">
    	 <i class="iconfont icon-love"></i> 
         </span>
         
            <span class="author" itemprop="copyrightHolder"><a href="https://akunorokia.github.io/">Akunor</a> | </span> 
         

         
		  <span>Powered by <a href="https://gohugo.io/" target="_blank" rel="external nofollow">Hugo</a> & <a href="https://github.com/liuzc/leaveit" target="_blank" rel="external nofollow">LeaveIt</a></span> 
    </div>
</footer>












    
     <link href="//lib.baomitu.com/lightgallery/1.6.11/css/lightgallery.min.css" rel="stylesheet">  
      
     <script src="/js/vendor_gallery.min.js" async="" ></script>
    
  



     </div>
  </body>
</html>
